<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- /课程详情 开始 -->
    <section class="container">
      <section class="path-wrap txtOf hLh30">
        <a href="#" title class="c-999 fsize14">首页</a>
        \
        <a href="#" title class="c-999 fsize14">{{courseWebVo.subjectLevelOne}}</a>
        \
        <span class="c-333 fsize14">{{courseWebVo.subjectLevelTwo}}</span>
      </section>
      <div>
        <article class="c-v-pic-wrap" style="height: 357px;">
          <section class="p-h-video-box" id="videoPlay">
            <img :src="courseWebVo.cover" :alt="courseWebVo.title" class="dis c-v-pic">
          </section>
        </article>
        <aside class="c-attr-wrap">
          <section class="ml20 mr15">
            <h2 class="hLh30 txtOf mt15">
              <span class="c-fff fsize24">{{courseWebVo.title}}</span>
            </h2>
            <section class="c-attr-jg">
              <span class="c-fff">价格：</span>
              <b class="c-yellow" style="font-size:24px;">￥{{courseWebVo.price}}</b>
            </section>
            <section class="c-attr-mt c-attr-undis">
              <span class="c-fff fsize14">主讲： {{courseWebVo.teacherName}}&nbsp;&nbsp;&nbsp;</span>
            </section>
            <section class="c-attr-mt of">
              <span class="ml10 vam">
                <em class="icon18 scIcon"></em>
                <a class="c-fff vam" title="收藏" href="#" >收藏</a>
              </span>
            </section>
            <section class="c-attr-mt">
              <a href="#" title="立即观看" class="comm-btn c-btn-3">立即观看</a>
            </section>
          </section>
        </aside>
        <aside class="thr-attr-box">
          <ol class="thr-attr-ol clearfix">
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-fff f-fM">购买数</span>
                <br>
                <h6 class="c-fff f-fM mt10">{{courseWebVo.buyCount}}</h6>
              </aside>
            </li>
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-fff f-fM">课时数</span>
                <br>
                <h6 class="c-fff f-fM mt10">20</h6>
              </aside>
            </li>
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-fff f-fM">浏览数</span>
                <br>
                <h6 class="c-fff f-fM mt10">501</h6>
              </aside>
            </li>
          </ol>
        </aside>
        <div class="clear"></div>
      </div>
      <!-- /课程封面介绍 -->
      <div class="mt20 c-infor-box">
        <article class="fl col-7">
          <section class="mr30">
            <div class="i-box">
              <div>
                <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                  <a name="c-i" class="current" title="课程详情">课程详情</a>
                </section>
              </div>
              <article class="ml10 mr10 pt20">
                <div>
                  <h6 class="c-i-content c-infor-title">
                    <span>课程介绍</span>
                  </h6>
                  <div class="course-txt-body-wrap">
                    <section class="course-txt-body">
                      <p v-html="courseWebVo.description">{{courseWebVo.description}}</p>
                    </section>
                  </div>
                </div>
                <!-- /课程介绍 -->
                <div class="mt50">
                  <h6 class="c-g-content c-infor-title">
                    <span>课程大纲</span>
                  </h6>
                  <section class="mt20">
                    <div class="lh-menu-wrap">
                      <menu id="lh-menu" class="lh-menu mt10 mr10">
                        <ul>
                          <!-- 文件目录 -->
                          <li class="lh-menu-stair" v-for="chapter in chapterVideoList" :key="chapter.id">
                            <a href="javascript: void(0)" :title="chapter.title" class="current-1">
                              <em class="lh-menu-i-1 icon18 mr10"></em>{{chapter.title}}
                            </a>


<!--                            <ol class="lh-menu-ol" style="display: block;">-->
<!--                              <li class="lh-menu-second ml30" v-for="video in chapter.children" :key="video.id">-->
<!--                                <a :href="'/player/'+video.videoSourceId" target="_blank">-->
<!--                                  <span class="fr">-->
<!--                                    <i class="free-icon vam mr10">免费试听</i>-->
<!--                                  </span>-->
<!--                                  <em class="lh-menu-i-2 icon16 mr5">&nbsp;</em>{{video.title}}-->
<!--                                </a>-->
<!--                              </li>-->
<!--                            </ol>-->
                          </li>
                        </ul>
                      </menu>
                    </div>
                  </section>
                </div>
                <!-- /课程大纲 -->
              </article>
            </div>
          </section>
        </article>
        <aside class="fl col-3">
          <div class="i-box">
            <div>
              <section class="c-infor-tabTitle c-tab-title">
                <a title href="javascript:void(0)">主讲讲师</a>
              </section>
              <section class="stud-act-list">
                <ul style="height: auto;">
                  <li>
                    <div class="u-face">
                      <a href="#">
                        <img :src="courseWebVo.avatar" width="50" height="50" alt>
                      </a>
                    </div>
                    <section class="hLh30 txtOf">
                      <a class="c-333 fsize16 fl" href="#">{{courseWebVo.teacherName}}</a>
                    </section>
                    <section class="hLh20 txtOf">
                      <span class="c-999">{{courseWebVo.intro}}</span>
                    </section>
                  </li>
                </ul>
              </section>
            </div>
          </div>
          <div class="i-box">
            <div>
              <section class="c-infor-tabTitle c-tab-title">
                <a title href="javascript:void(0)">功能</a>
              </section>
              <section class="stud-act-list">
                <ul style="height: auto;">
                  <li>
                      <el-button type="primary" size="small" @click="openDownloadDialog=true">生成试卷</el-button>
                  </li>
                </ul>
              </section>
            </div>
          </div>
        </aside>
        <div class="clear"></div>
      </div>
    </section>
    <!-- /课程详情 结束 -->
    <el-dialog :visible.sync="openDownloadDialog" v-if="openDownloadDialog"
      title="自动试卷生成" width="60%"
    ><el-button @click="addQuesitoninfo">添加</el-button>
      <el-button @click="paperInfoDialog=true">信息设置</el-button>
      <el-button @click="clear">清除</el-button>
      <el-table
        :data="QuestionTypeList"
        style="width: 90%">
        <el-table-column
          prop="type"
          label="类型"
          style=""
         >
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          width="200">
          <template slot-scope="{row}" >
            <el-rate v-model="row.difficulty"
                     :colors="['#99A9BF', '#E37969', '#F40808']"
                     disabled
                     show-text
                     :texts="diff"
                     text-color="#ff9900" ></el-rate>
          </template>
        </el-table-column>
        <el-table-column
          prop="number"
          label="数量"
          width="100">
        </el-table-column>
        <el-table-column
          prop="score"
          label="单题分值"
          width="100">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDownLoad()">生成</el-button>
        <el-button @click="openDownloadDialog=false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="addQuestionInfoDialog" v-if="addQuestionInfoDialog"
               title="添加题型" width="40%"
    >
      <el-form >
        <el-form-item label="类型">
         <el-select v-model="QuestionCreateInfo.type">
           <el-option
             v-for="item in questiontype"
             :key="item.value"
             :label="item.label"
             :value="item.value">
           </el-option>
         </el-select>
        </el-form-item>
        <div v-if="isdetail==false">
          <el-form-item label="难度">
            <el-rate
              v-model="QuestionCreateInfo.difficulty"
              :texts="diff"
              :colors="['#99A9BF', '#F7BA2A', '#F56c6c']"
              show-text>
            </el-rate>
          </el-form-item>
          <el-form-item label="习题数量">
            <el-input-number v-model="QuestionCreateInfo.number" :min="0" :step="1" controls-position="right"/>
          </el-form-item>
          <el-form-item label="单题分值" >
            <el-input-number v-model="QuestionCreateInfo.score" :step="0.5" :min="0" controls-position="right"/>
          </el-form-item>
        </div>
        <div v-else>
          <div v-for="chapter in chapterVideoList" :key="chapter.id">
            <el-divider></el-divider>
              <span style=" font-size: 25px">{{chapter.title}}</span>
            <el-divider></el-divider>
            <el-form-item label="难度">
              <el-rate
                v-model="chapter.difficulty"
                :texts="diff"
                :colors="['#99A9BF', '#F7BA2A', '#F56c6c']"
                show-text>
              </el-rate>
            </el-form-item>
            <el-form-item label="习题数量">
              <el-input-number v-model="chapter.number" :min="0" :step="1" controls-position="right"/>
            </el-form-item>
            <el-form-item label="单题分值" >
              <el-input-number v-model="chapter.score" :step="0.5" :min="0" controls-position="right"/>
            </el-form-item>
          </div>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="opendetailed" v-if="QuestionCreateInfo.type!=''" type="primary">详细设置</el-button>
        <el-button @click="addQuestionInfo()" type="primary">添加</el-button>
        <el-button @click="addQuestionInfoDialog = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="paperInfoDialog" v-if="paperInfoDialog"
               title="生成试卷信息设置" width="40%"
    >
      <el-form >
        <el-form-item label="试卷大标题设置">
          <el-input v-model="paperInfo.papertitle" />
        </el-form-item>
        <el-form-item label="试卷小标题设置">
          <el-input v-model="paperInfo.testtitle" />
        </el-form-item>
        <el-form-item label="试卷适用专业设置">
          <el-input v-model="paperInfo.classtitle" />
        </el-form-item>
        <!-- <el-form-item label="存放题库文件夹">
          <el-select v-model="paperInfo.folderId">
            <el-option
              v-for="item in tree"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <el-button type="primary" size="mini" @click="clearPaper">清除</el-button>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setPaperInfo()" type="primary">确定</el-button>
        <el-button @click="paperInfoDialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import cookie from 'js-cookie'
// import courseApi from '@/api/course'
// import question from "@/api/question";
// import file from "@/api/file";
// import homework from "@/api/homework";
export default {

  created() {
  //   var userStr = cookie.get('guli_ucenter')
  //   // 把字符串转换json对象(js对象)
  //   if(userStr) {
  //     this.loginInfo = JSON.parse(userStr)
  //     this.getFolder()
  //   }
  // this.getCourseInfo()

  },
  data(){
     return{
       courseId:'',
       chapterVideoList:[],
       loginInfo:{},
       diff:["无聊","容易","中等","费时","极难"],
       questiontype:[],
       courseWebVo:{},
       openDownloadDialog:false,
       addQuestionInfoDialog:false,
       paperInfoDialog:false,
       isdetail:false,
       QuestionCreateInfo:{
         type:'',
         difficulty:0,
         number:0,
         score:0,
       },
       paperInfo:{
         teaId:'',
         papertitle:'2017-2018学年第一学期期末考试试卷',
         testtitle:'《操作系统》（A）卷',
         classtitle:'（适用专业班级：网工15级①②班）',
         folderId:'',
         chapterNumber:0
       },
       QuestionTypeList:[],
        tree:[],

       detailquestioninfoList:[],

     }
  },
  methods:{
     getCourseInfo(){
       courseApi.getCourseInfo(this.$route.params.id)
         .then(response => {
           this.courseId=this.$route.params.id

             this.courseWebVo= response.data.data.courseWebVo,
             this.chapterVideoList=response.data.data.chapterVideoList

         })
     },
     addQuesitoninfo(){
       if(this.addQuestionInfoDialog==false)
         this.getCourseQuestionListInfo()
       this.addQuestionInfoDialog=!  this.addQuestionInfoDialog

     },
     getCourseQuestionListInfo(){
       question.getCourseQuesitonListInfo(this.courseId).then(res=>{
          let p=res.data.data.list
         let lists=[]
         p.forEach(i=>{
           let k ={
             value:i,
             label:i
           }
          lists.push(k)
         })
        this.questiontype=lists
        lists=[]
       })
     },
    opendetailed(){
      this.isdetail=!this.isdetail
    },
    clearPaper(){
      this.paperInfo={}
    },
    clear(){
      this.paperInfo={}
      this.QuestionTypeList=[]
    },
    setPaperInfo(){
      this.paperInfoDialog=false
    },
     getFolder(){
      homework.getfolderList(this.loginInfo.teacher).then(res=> {
      this.tree = res.data.data.folderList
    })
    },
    addQuestionInfo(){
      if(this.isdetail==true){
        let num=0
        this.chapterVideoList.forEach(i=>{
          let curr ={
            id:i.id,
            difficulty:i.difficulty,
            number:i.number,
            score:i.score,
           type:this.QuestionCreateInfo.type
          }
          this.detailquestioninfoList.push(curr)
         num+=i.number
          i.difficulty=0
          i.number=0
          i.score=0
        })
        this.QuestionCreateInfo.number=num
        this.QuestionCreateInfo.score=0
      }

      this.QuestionTypeList.push(this.QuestionCreateInfo)
      this.QuestionCreateInfo={}
      this.addQuestionInfoDialog=false

    },
    handleDownLoad() {
      this.paperInfo.teaId=this.loginInfo.number
      this.paperInfo.chapterNumber=this.chapterVideoList.length
      let choice=0
      if(this.isdetail==true) {
         choice=1 //详情 模式
      }

        file.downCourseWord(this.detailquestioninfoList, this.QuestionTypeList, this.paperInfo,choice)
          .then((res) => {
            if (res) {
              let blob = new Blob([res.data], {
                type: "application/octet-stream;charset=utf-8",
              }); // res就是接口返回的文件流了
              let objectUrl = URL.createObjectURL(blob);
              const elink = document.createElement("a");
              elink.download = this.paperInfo.papertitle + ".doc"; //下载文件名称,
              elink.style.display = "none";
              elink.href = objectUrl;
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            }
            this.paperInfo.folderId=''
            this.QuestionTypeList = []
            this.detailquestioninfoList=[]
            this.QuestionCreateInfo.type=''
        this.isdetail=false
          })
          .catch(function (error) {
            console.log(error);
          });

      }
  }
};
</script>
